<template>
  <card-layout title="矿山名录" class="chart" bg="3">
    <template #extra>
      <el-button type="primary" size="small" @click="closeTree"><el-icon>
          <SwitchButton />
        </el-icon>&nbsp; 关闭</el-button>
    </template>
    <div class="content" v-loading="loading" element-loading-background="rgba(255, 255, 255, 0.15)">
      <div class="catalog-tree">
        <div class="tree-content">
          <el-input class="search-input" placeholder="请输入关键字" :prefix-icon="Search" v-model="searchKey" size="small">
          </el-input>
          <el-tree :data="treeData" node-key="id" :props="{
            children: 'children',
            label: 'areaName',
          }" :expand-on-click-node="false" default-expand-all ref="treeRef" :filter-node-method="filterNode">
            <template #default="{ node, data }">
              <span class="custom-tree-node" @click="onClick(data)">
                <span class="node-text" :title="node.label">
                  {{ node.label }}
                </span>
              </span>
            </template>
          </el-tree>
        </div>
      </div>
    </div>
  </card-layout>
</template>

<script setup>
import useUserStore from "@/store/modules/user";
import useOnemapStore from "@/store/modules/onemap";
import { Search } from "@element-plus/icons-vue";
import { getmineTree } from "@/api";
import { getCurrentInstance } from "vue";
const emit = defineEmits(["onClick", "closeMineTree"]);
const searchKey = ref("");
const loading = ref(false);
const { proxy } = getCurrentInstance();
import { emitter } from "@/utils/events";

watch(searchKey, (val) => {
  proxy.$refs["treeRef"].filter(val);
});
const treeData = ref([]);

const onClick = (data) => {
  //判断是否有点击权限
  if (!data || data.unused) return;
  const node = proxy.$refs["treeRef"]?.getNode(data.id);
  if (!node) return;
  const childrenCode = node.childNodes.map((item) => item.data.id);
  useOnemapStore().setSelectedNode({
    id: data.id,
    areaId: data.areaId,
    code: data.areaNo,
    name: data.areaName,
    level: data.level,
    openPitId: data.openPitId,
    childrenCode: [data.id, ...childrenCode],
  });

  // // 清空之前的煤矿信息 
  if (data.level === 4) {
    emitter.emit(`flyToMine`);
  }
};
let sourceList;
const loadTree = () => {
  loading.value = true;
  const params = { minTree: false };
  getmineTree(params)
    .then((res) => {
      let { areaId, roles } = useUserStore().userInfo;
      // 区划权限判断
      areaId = areaId.toString();
      let prefix = areaId;
      // 省
      if (areaId.endsWith("0000")) prefix = areaId.substring(0, 2);
      // 省
      if (areaId.endsWith("0000")) prefix = areaId.substring(0, 2);
      // 市
      else if (areaId.endsWith("00")) prefix = areaId.substring(0, 4);
      sourceList = res.data
        .filter((item) => item.level >= 3) // 过滤掉市级以上的数据
        .filter((item) => item.areaId) // 过滤掉没有aeraId的数据
        .map((item) => ({
          ...item, unused: areaId == 100000 ? false : !item.areaId.toString().startsWith(prefix), // 地区权限判断
        }));
      treeData.value = proxy.handleTree(sourceList);
    }).finally(() => {
      loading.value = false;
    });
};

const filterNode = (value, data) => {
  if (!value) return true
  return data.areaName.includes(value)
}

loadTree();

const toHome = () => {
  let { areaId } = useUserStore().userInfo;
  // 找到第一个有权限节点
  let node = sourceList.find((item) => item.areaId == areaId);
  onClick(node);
};

function closeTree() {
  emit("closeMineTree", 1)
}

</script>

<style lang="scss" scoped>
.chart {
  box-sizing: border-box;
  height: 100%;

  :deep(.search-input) {
    .el-input__inner {
      color: #bbcfff;
    }
  }

  :deep(.el-input__prefix-inner) {
    color: #36ffbf;
  }

  .content {
    box-sizing: border-box;
    height: 100%;
    color: #fff;
    padding: 16px;
    position: relative;

    .catalog-tree {
      position: absolute;
      box-sizing: border-box;
      padding: 8px;
      top: 0px;
      left: 0px;
      height: 100%;
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;

      .tree-content {
        .tree-top {
          width: 100%;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          background-color: rgba(31, 198, 255, 0.35);

          .name {
            width: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .operate {
            width: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        ::v-deep(.el-tree) {
          background: transparent;
          color: #fff;

          --el-tree-node-content-height: 30px;

          .el-tree-node__content:hover {
            background-color: rgba(0, 0, 0, 0.15);
          }

          .el-tree-node:focus>.el-tree-node__content {
            background-color: rgba(31, 198, 255, 0.35);
          }

          .el-checkbox__inner {
            background-color: rgba(0, 12, 50, 1);
            // border: 1px solid #196590 !important;
          }

          // .is-current {
          //   .el-tree-node__content {
          //     background-color: rgba(31, 198, 255, 0.35);
          //   }
          // }
        }

        .custom-tree-node {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 14px;
          padding-right: 8px;

          .node-text {
            width: 100%;
            white-space: nowrap;
            /* 文字不换行 */
            overflow: hidden;
            /* 溢出部分隐藏 */
            text-overflow: ellipsis;
            /* 显示省略号 */
          }

          .btn {
            color: #9cfefe;
            border: 1px solid #1fc6ff7d;
            background-color: rgb(156 254 254 / 15%);
            // padding: 1px 6px;
            width: 40px;
            text-align: center;
            border-radius: 2px;
          }

          .btn:hover {
            cursor: pointer;
          }
        }
      }
    }
  }
}

::v-deep(.dark-green-theme .el-tree .el-tree-node__content:hover,
  .dark-green-theme .el-tree .is-current .el-tree-node__content) {
  background-color: transparent;
}
</style>
